<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- <a href="javascript:alert(1111);">弹出</a> -->
    <!-- <a href="javascript:;">不做任何操作</a> -->
    <a href="https://www.baidu.com">百度</a>
    <form action="https://www.baidu.com">
        <button>提交</button>
    </form>

    <textarea name="" id="" cols="30" rows="10"></textarea>
    <img src="../images/bg.jpg" alt="">
</body>
<script>
    // 浏览器的默认行为 (浏览器自带一些操作)
    // 1. a标签默认跳转
    // 2. 表单默认提交
    // 3. F5 刷新页面
    // 4. 鼠标右键菜单
    // 5. 复制粘贴
    // 6. 拖拽

    // 阻止浏览器的默认行为?
    // 1. 阻止a标签默认跳转
    //     <a href="javascript:;">刷新</a>
    // 2. 阻止表单默认提交
    // 3. 阻止F5刷新页面
    // 4. 阻止鼠标右键菜单
    // 5. 阻止复制粘贴
    // 6. 阻止拖拽

    // 阻止浏览器的默认行为
    // 常规浏览器 (IE低版本没有)
    // e.preventDefault();

    // IE低版本
    // e.returnValue = false;  //  类似 return false;

    // 兼容
    // if (e.preventDefault) {
    //     e.preventDefault();
    // } else {
    //     e.returnValue = false;
    // }


    // (1) 阻止a标签默认跳转
    var a = document.querySelector("a");

    // 点击a标签时 -> 阻止浏览器的默认行为  ->
    a.onclick = function (e) {
        // 阻止浏览器的默认行为
        // 常规浏览器 (IE低版本没有)
        // e.preventDefault();

        // IE低版本
        // e.returnValue = false;  //  类似 return false;

        // 兼容
        if (e.preventDefault) {
            e.preventDefault();
        } else {
            e.returnValue = false;
        }

        // return false;    注意: return false也可以阻止浏览器的默认行为 => 后续代码无法执行

        // alert(1111);


    }


    // (2) 阻止表单提交
    var form = document.querySelector("form");

    form.onsubmit = function (e) {
        var e = e || window.event;
        // 阻止浏览器的默认行为
        // 常规浏览器 (IE低版本没有)
        // e.preventDefault();

        // IE低版本
        // e.returnValue = false;  //  类似 return false;

        // 兼容
        // if (e.preventDefault) {
        //     e.preventDefault();
        // } else {
        //     e.returnValue = false;
        // }

        return false;
    }


    // 阻止F5刷新页面

    document.onkeydown = function (e) {
        var e = e || window.event;
        var key = e.key;
        var keyCode = e.keyCode;

        console.log(key, keyCode);

        // 直接阻止  => 阻止按键输入
        // if (e.preventDefault) {
        //     e.preventDefault();
        // } else {
        //     e.returnValue = false;
        // }


        if (keyCode == 116) { // 阻止F5刷新
            if (e.preventDefault) {
                e.preventDefault();
            } else {
                e.returnValue = false;
            }
        } else if (e.ctrlKey && keyCode == 67) { // 阻止ctrl+c(按键方面阻止复制)
            // console.log("按下了复制");
            // if (e.preventDefault) {
            //     e.preventDefault();
            // } else {
            //     e.returnValue = false;
            // }
        } else if (e.ctrlKey && keyCode == 86) { // 阻止ctrl+v(按键方面阻止粘贴)
            // console.log("按下了粘贴");
            // if (e.preventDefault) {
            //     e.preventDefault();
            // } else {
            //     e.returnValue = false;
            // }
        }


    }


    // 功能上阻止复制和粘贴 剪切
    document.oncopy = function (e) {
        console.log("复制");
        if (e.preventDefault) {
            e.preventDefault();
        } else {
            e.returnValue = false;
        }
    }

    document.onpaste = function (e) {
        console.log("粘贴");
        if (e.preventDefault) {
            e.preventDefault();
        } else {
            e.returnValue = false;
        }
    }

    document.oncut = function (e) {
        console.log("剪切");
        if (e.preventDefault) {
            e.preventDefault();
        } else {
            e.returnValue = false;
        }
    }

    // 图片拖拽时进行阻止
    document.ondragstart = function (e) {
        if (e.preventDefault) {
            e.preventDefault();
        } else {
            e.returnValue = false;
        }
    }


    // 阻止鼠标右键菜单

    document.oncontextmenu = function (e) {
        console.log("右键菜单");

        if (e.preventDefault) {
            e.preventDefault();
        } else {
            e.returnValue = false;
        }
    }











</script>

</html>